<template>
  <div class="systemDetailInfo">
    <div class="info-content-tempt">
      <TitleContainer spot="操作日志详情" />
      <div class="content">
        <span class="item">操作id: {{ data.id }}</span>

        <span class="item">用户id: {{ data.user_id }}</span>
        <span class="item">用户名: {{ data.user && data.user.name }}</span>
        <span class="item">系统id: {{ data.system_id }}</span>
        <span class="item">
          系统名:
          <el-tag type="warning" effect="dark">{{
            data.system && data.system.name
          }}</el-tag>
        </span>

        <span class="item">
          IP:<span class="link-type">{{ data.ip }}</span>
        </span>
        <span class="item">
          访问路径: <span class="link-type">{{ data.url }}</span>
        </span>
        <span class="item">
          请求: <span class="red">{{ data.request }}</span>
        </span>
        <span class="item"
          >响应:
          <span class="red">{{ data.response }}</span>
        </span>
        <span class="item"
          >创建者: {{ data.create_by }}（创建时间：{{ data.create_at }}）</span
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import TitleContainer from '@/components/title/TitleContainer.vue'
import { systemGenerateSecret, systemDeleteSecret } from '@/api/system/system'
import { MessageBox } from 'element-ui'
@Component({
  name: 'systemDetailInfo',
  components: {
    //引用的组件在这里声明
    TitleContainer
  }
})
export default class extends Vue {
  @Prop({ default: () => {} }) private data!: any
  // @Prop({ required: true }) private propExp2?: boolean
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
  }
  // 创建密钥
  private async handleCreateSecret(id: any) {
    try {
      const { data } = await systemGenerateSecret({ id: id })
      this.$notify({
        title: '成功',
        message: '创建成功',
        type: 'success',
        duration: 2000
      })
    } catch (error) {
      console.error(error)
    } finally {
      this.$emit('getInfo')
    }
  }
  //删除密钥
  private async handleDeleteSecret(id: any, index: any) {
    MessageBox.confirm(`确定删除该密钥？`, '确定', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        const { data } = await systemDeleteSecret({ id: id, index: index })
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      } catch (error) {
        console.error(error)
      } finally {
        this.$emit('getInfo')
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.systemDetailInfo {
  padding: 20px;
  .info-content-tempt {
    position: relative;
    &:nth-of-type(n + 2) {
      margin-top: 20px;
    }
    &::after {
      content: '';
      width: 100%;
      position: absolute;
      bottom: 0;
      border-bottom: 1px solid $menuText;
    }
    &:last-of-type {
      &::after {
        content: '';
        width: 100%;
        position: absolute;
        bottom: 0;
        border-bottom: 0;
      }
    }
    .content {
      display: flex;
      flex-flow: column;
      align-content: flex-start;
      margin-top: 30px;
      .item {
        margin-bottom: 25px;
        font-size: 16px;
        .clickable {
          cursor: pointer;
          color: $clickableBlue;
        }
        .clickable-warning {
          cursor: pointer;
          color: $pink;
          margin-left: 20px;
        }
      }
      .key-block {
        display: block;
        margin-bottom: 10px;
        height: 20px;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
